<template>
  <div class="classify">
    <div class="classify-wrapper">
      <div class="classify-item" @click="_goPage('/exchange')">
        <img src="./convert.png" width="48" height="48" alt="">
        <span>兑换区</span>
      </div>
      <div class="classify-item" @click="_goPage('/entryLux')">
        <img src="./EntryLux.png" width="48" height="48" alt="">
        <span>轻奢品区</span>
      </div>
      <div class="classify-item" @click="_goPage('/collection')">
        <img src="./Collection.png" width="48" height="48" alt="">
        <span>收藏</span>
      </div>
      <div class="classify-item" @click="_goPage('/sort')">
        <img src="./classify.png" width="48" height="48" alt="">
        <span>分类</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  export default {
    name: 'Classify',
    computed: {
      ...mapState(['wtitle', 'tabSelectID']),
    },
    methods: {
      ...mapMutations(['WTITLE', 'TABSELECTID']),
      /**
       * 页面跳转
       * @param url [String] 页面跳转路径
       * @private
       */
      _goPage(url) {
        if (url === '/sort') {
          sessionStorage.setItem('tabSelectID', 2)
          this.TABSELECTID(2) //更新底部导航的选中ID
          this.WTITLE('分类')
        }
        if (url === '/collection') {
          if (!localStorage.getItem('userId')) {
            this.$Message.warning('请先登录')
            return
          }
        }
        this.$router.push(url)
      }
    }
  }
</script>

<style scoped>
  .classify {
    margin-top: 5px;
    padding: 20px 0 15px;
    background-color: #ffffff;
  }

  .classify .classify-wrapper {
    display: flex;
  }

  .classify .classify-wrapper .classify-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .classify .classify-wrapper .classify-item span {
    margin-top: 8px;
    line-height: 12px;
    font-size: 12px;
    color: #202020;
  }
</style>
